<template>
  <view class="book-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="header-content">
        <!-- 左侧类别选择 -->
        <view class="category-select" :class="{ active: showCategory }" @tap="showCategoryPicker">
          <text class="selected">{{ currentCategory }}</text>
          <view class="arrow"></view>
        </view>
        
        <!-- 右侧日期选择 -->
        <view class="date-select">
          <view class="date-arrow left" @tap.stop="changeDate(-1)"></view>
          <view class="date-box" @tap="showDatePicker">
            <text class="date">{{ formatDisplayDate(currentDate) }}</text>
            <image :src="images.icons.calendar" class="calendar-icon" mode="aspectFit"></image>
          </view>
          <view class="date-arrow right" @tap.stop="changeDate(1)"></view>
        </view>
      </view>
    </view>

    <!-- 医生列表 -->
    <scroll-view class="doctor-list" scroll-y>
      <view class="doctor-item" v-for="(item, index) in doctorList" :key="index">
        <image class="avatar" :src="item.avatar" mode="aspectFill" />
        <view class="info">
          <view class="name-row">
            <text class="name">{{ item.name }}</text>
            <view class="book-btn" @tap="handleBook(item)">立即预约</view>
          </view>
          <view class="desc">{{ item.description }}</view>
        </view>
      </view>
    </scroll-view>

    <!-- 日期选择器弹窗 -->
    <view class="picker-popup" v-if="showPicker">
      <view class="picker-mask" @tap="hideDatePicker"></view>
      <view class="picker-content">
        <view class="picker-header">
          <text class="cancel" @tap="hideDatePicker">取消</text>
          <text class="title">选择日期</text>
          <text class="confirm" @tap="confirmDate">确定</text>
        </view>
        <picker-view class="date-picker" :value="dateArray" @change="handleDateChange">
          <picker-view-column>
            <view class="picker-item" v-for="year in years" :key="year">{{ year }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="month in months" :key="month">{{ month }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="day in days" :key="day">{{ day }}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>

    <!-- 类别选择弹窗 -->
    <view class="picker-popup" v-if="showCategory">
      <view class="picker-mask" @tap="hideCategoryPicker"></view>
      <view class="picker-content">
        <view class="picker-header">
          <text class="cancel" @tap="hideCategoryPicker">取消</text>
          <text class="title">选择类别</text>
          <text class="confirm" @tap="confirmCategory">确定</text>
        </view>
        <picker-view class="category-picker" :value="[categoryIndex]" @change="handleCategoryChange">
          <picker-view-column>
            <view class="picker-item" v-for="category in categories" :key="category">{{ category }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { DEFAULT_IMAGE, images } from "../../config/images"

const currentDate = ref(new Date())
const showPicker = ref(false)
const dateArray = ref([0, 0, 0])
const tempDate = ref(new Date())

// 生成年月日数组
const years = computed(() => {
  const currentYear = new Date().getFullYear()
  return Array.from({ length: 10 }, (_, i) => currentYear + i)
})

const months = computed(() => Array.from({ length: 12 }, (_, i) => i + 1))

const days = computed(() => {
  const year = years.value[dateArray.value[0]]
  const month = months.value[dateArray.value[1]]
  const daysInMonth = new Date(year, month, 0).getDate()
  return Array.from({ length: daysInMonth }, (_, i) => i + 1)
})

const doctorList = ref([
  {
    avatar: DEFAULT_IMAGE,
    name: '小美',
    description: '10美容经验，擅长XXXXX项目，某某手法，多次获得客户好评'
  },
  {
    avatar: DEFAULT_IMAGE,
    name: '小美',
    description: '10美容经验，擅长XXXXX项目，某某手法，多次获得客户好评'
  },
  {
    avatar: DEFAULT_IMAGE,
    name: '小美',
    description: '10美容经验，擅长XXXXX项目，某某手法，多次获得客户好评'
  }
])

// 类别选择相关
const categories = ['美白类', '抗皱类', '医美类']
const currentCategory = ref('美白类')
const categoryIndex = ref(0)
const showCategory = ref(false)
const tempCategory = ref('美白类')

// 格式化显示日期
const formatDisplayDate = (date: Date) => {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 显示日期选择器
const showDatePicker = () => {
  const date = currentDate.value
  dateArray.value = [
    years.value.indexOf(date.getFullYear()),
    date.getMonth(),
    date.getDate() - 1
  ]
  tempDate.value = new Date(date)
  showPicker.value = true
}

// 隐藏日期选择器
const hideDatePicker = () => {
  showPicker.value = false
}

// 处理日期变化
const handleDateChange = (e: any) => {
  const values = e.detail.value
  dateArray.value = values
  const year = years.value[values[0]]
  const month = months.value[values[1]]
  const day = days.value[values[2]]
  tempDate.value = new Date(year, month - 1, day)
}

// 确认日期选择
const confirmDate = () => {
  currentDate.value = tempDate.value
  hideDatePicker()
}

// 显示类别选择器
const showCategoryPicker = () => {
  categoryIndex.value = categories.indexOf(currentCategory.value)
  tempCategory.value = currentCategory.value
  showCategory.value = true
}

// 隐藏类别选择器
const hideCategoryPicker = () => {
  showCategory.value = false
}

// 处理类别变化
const handleCategoryChange = (e: any) => {
  const index = e.detail.value[0]
  tempCategory.value = categories[index]
}

// 确认类别选择
const confirmCategory = () => {
  currentCategory.value = tempCategory.value
  hideCategoryPicker()
}

// 预约处理
const handleBook = (doctor: any) => {
  // Mock数据
  const params = {
    storeId: 1,
    storeName: '高新区总店',
    storeHours: '09:00 ~ 21:00',
    userName: '张三',
    doctorName: doctor.name
  };
  
  // 将对象转换为查询字符串
  const queryString = Object.keys(params)
    .map(key => `${key}=${encodeURIComponent(params[key])}`)
    .join('&');
    
  uni.navigateTo({
    url: `/pages/appointment/detail?${queryString}`
  });
};

// 切换日期
const changeDate = (days: number) => {
  const newDate = new Date(currentDate.value)
  newDate.setDate(newDate.getDate() + days)
  currentDate.value = newDate
}

onMounted(() => {
  // 初始化当前日期即可，不需要自动弹出选择器
  currentDate.value = new Date()
})
</script>

<style lang="scss" scoped>
.book-container {
  min-height: 100vh;
  background: #f0f2ff;
  overflow-x: hidden;
  box-sizing: border-box;
  
  .nav-header {
    background: #4e6ef2;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    width: 100%;
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }
    
    .category-select {
      display: flex;
      align-items: center;
      padding: 8rpx 20rpx;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 32rpx;
      
      .selected {
        font-size: 32rpx;
        font-weight: 500;
        color: #fff;
        margin-right: 10rpx;
      }
      
      .arrow {
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-top: 8rpx solid #fff;
        transition: transform 0.3s;
      }
      
      &.active .arrow {
        transform: rotate(180deg);
      }
    }
    
    .date-select {
      display: flex;
      align-items: center;
      
      .date-arrow {
        width: 16rpx;
        height: 16rpx;
        border-top: 2rpx solid #fff;
        border-right: 2rpx solid #fff;
        
        &.left {
          transform: rotate(-135deg);
          margin-right: 20rpx;
        }
        
        &.right {
          transform: rotate(45deg);
          margin-left: 20rpx;
        }
      }
      
      .date-box {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 32rpx;
        padding: 8rpx 20rpx;
        
        .date {
          font-size: 28rpx;
          color: #fff;
          margin-right: 10rpx;
        }
        
        .calendar-icon {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
  
  .doctor-list {
    padding: 20rpx;
    box-sizing: border-box;
    height: calc(100vh - 120rpx);
    
    .doctor-item {
      display: flex;
      align-items: flex-start;
      background: #fff;
      padding: 30rpx;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        overflow: hidden;
        
        .name-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;
          
          .name {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
            flex: 1;
            margin-right: 20rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .book-btn {
            flex-shrink: 0;
            min-width: 120rpx;
            height: 50rpx;
            background: #4e6ef2;
            color: #fff;
            font-size: 24rpx;
            border-radius: 25rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 16rpx;
          }
        }
        
        .desc {
          font-size: 24rpx;
          color: #666;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
}

.picker-popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .picker-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
  }
  
  .picker-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transform: translateY(0);
    transition: transform 0.3s;
    
    .picker-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 88rpx;
      padding: 0 30rpx;
      border-bottom: 1rpx solid #eee;
      
      .title {
        font-size: 32rpx;
        color: #333;
      }
      
      .cancel, .confirm {
        font-size: 28rpx;
        padding: 20rpx;
      }
      
      .cancel {
        color: #999;
      }
      
      .confirm {
        color: #4e6ef2;
      }
    }
    
    .date-picker {
      width: 100%;
      height: 400rpx;
      
      .picker-item {
        line-height: 80rpx;
        text-align: center;
      }
    }
    
    .category-picker {
      width: 100%;
      height: 400rpx;
      
      .picker-item {
        line-height: 80rpx;
        text-align: center;
      }
    }
  }
}
</style>
